<template>
	<uni-nav-bar :statusBar="true" @clickRight="openAdd()">
		<template v-slot:left="left">
			<view class="nav-left">
				<view class="icon iconfont icon-qiandao"></view>
			</view>
		</template>
	
		<view class="flex-sc-ac nav-tab-bar" style="width: 100%;">
			<block v-for="(tab,index) in tabBars" :key="index">
				<view class="flex-ac" :class="{'active' :tabIndex==index}" @tap="changeTab(index)" style="flex-direction: column;">
					<view>{{tab.name}}</view>
					<view class="nav-tab-bar-line" ></view>
				</view>
			</block>
			
		</view>
	
		<template v-slot:right="right">
			<view class="nav-right">
				<view class="icon iconfont icon-bianji1"></view>
			</view>
		</template>
	
	</uni-nav-bar>
</template>

<script>
	export default{
		props:{
			tabBars:Array,
			tabIndex:Number
		},
		methods: {
			changeTab(index){
				this.$emit("change-tab",index);
			},
			openAdd(){
				uni.navigateTo({
					url:'../add-input/add-input'
				});
			}
		}
	}
</script>

<style>
	/* .nav-left{
		border: 1px solid;
		width: 100%;
	} */
	.nav-left>view {
		color: #FF9619;
		margin-left: 25rpx;
	}
	
	/* .nav-right{
		border: 1px solid;
		width: 100%;
	} */
	.nav-right>view,
	.nav-left>view {
		font-size: 50rpx;
	}
	
	.nav-tab-bar {
		margin-left: -25rpx;
		position: relative;
	}
	
	.nav-tab-bar>view {
		font-size: 32rpx;
		font-weight: bold;
		color: #9B9B9B;
		padding: 0 15rpx;
	}
	
	.active .nav-tab-bar-line{
		border-bottom: 6rpx solid #FEDE33;
		border-top: 6rpx solid #FEDE33;
		width: 78rpx;
		border-radius: 10rpx;
		margin-top: 32px;
		position: absolute;
	}
	.active {
		color: #333333!important;
	}
</style>
